@import "mixin-fun";
@import "./color.scss";
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}

.tip {
    background-color: #faf8fb;
    color: #908da1;
    height: rem(50);
    line-height: rem(50);
    text-align: center;
    font-size: rem(20);
}

.order_goods {
    background-color: #fff;
    padding: 0 rem(20);
    .order_list {
        font-size: 0;
        padding-top: rem(20);
        .goods_avatar {
            width: 20%;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            img {
                width: auto;
                max-width: 100%;
                vertical-align: middle;
                max-height: 100px;
            }
        }
        .goods_dec {
            font-size: rem(22);
            padding-left: 10px;
            width: 80%;
            display: inline-block;
            vertical-align: middle;
            &:after {
                content: "";
                margin-top: rem(20);
                width: 100%;
                border-bottom: 1px solid #eeeeee;
                display: block;
            }
            .title,
            .capacity {
                word-break: break-all;
                overflow: hidden;
                color: $mainColor; // line-height: auto;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: normal;
            }
            .capacity {
                margin-top: rem(5)
            }
            .capacity,
            .count {
                color: $tipColor
            }
            .goods_dec_num {
                line-height: rem(40); // height:rem(40)
            }
            .price {
                color: #e36cba;
            }
            .count {
                float: right;
            }
        }
    }
    .all_goods_cpunt {
        background-color: #fff;
    }
}

.mui-btn-info {
    background-color: $info;
    color: #ffffff;
    border: none;
    height: rem(50);
    line-height: 1;
    font-size: rem(20);
    &:active {
        opacity: 0.8;
        background-color: $info !important;
    }
    &.mui-btn-outlined {
        border: 1px solid $info;
        color: $info;
        background-color: #fff;
    }
}

.mui-btn-gray {
    background-color: $gray;
    color: $tipColor;
    border: none;
    height: rem(50);
    line-height: 1;
    font-size: rem(20);
    &:active {
        opacity: 0.8;
        background-color: $gray !important;
    }
    &.mui-btn-outlined {
        border: 1px solid $gray;
        color: $gray;
        background-color: #fff;
    }
}

.order_error {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    img {
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    p {
        margin-top: rem(50);
        color: $tipColor;
    }
}
.error{
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    img {
      width: 80%;
      margin: 0 auto;
      display: block;
    }
    p {
      margin-top: rem(50);
      color: $tipColor;
    }
}
.mui-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3) !important;
}
.dialog{
    width:72%;
    height: rem(500);
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 999;
    background-color: #ffffff;
    border-radius: 5px;
    // display: none;
    & img {
        max-width: 100%;
        max-height: 100%;
    }
    .close {
        position: absolute;
        right: rem(25);
        top: rem(25);
        width: rem(27);
        height: rem(27);
    }
    .dialog_body {
        margin-top: rem(105);
        .img {
            height: rem(50);
        }
        .title {
            color: $dgColor;
            height: rem(30);
            line-height: rem(30);
            font-size: rem(30);
            margin-top: rem(35);
        }
        .text {
            color: $tipColor;
            height: rem(22);
            line-height: rem(22);
            font-size: rem(22);
            margin-top: rem(35);
            padding: rem(0) rem(25) rem(0) rem(25);
        }
    }
    .dialog_footer {
        width: 57%;
        height: rem(60);
        margin: 0 auto;
        margin-top: rem(85);
        border-radius: 5px;
        line-height: rem(60);
        color: #fff;
        background-color: $info;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            margin-right: 5px;
        }
    }
}

.share-img {
    width: 70%;
    z-index: 22222222;
    position: fixed;
    top: 20px;
    right: 20px;
}
.preheating{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    text-align: center;
    background-color: rgba(0,0,0,.85) !important;
    width: 100%;
    height: 100%;
    .img_p{
      width: 100%;
      max-height: 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      overflow:auto;
      text-align: center;
      .close{
        position:absolute;
        top: rem(20);
        right: rem(20);
        width: rem(50);
        height: rem(50);
        background: url(../img/close.png) no-repeat center center;
        background-size: rem(25) rem(25);
        background-color: rgba(0,0,0,0.5) !important;
        border-radius: rem(50);
        & img{
          max-width: 100%;
          max-height: 100%;
        }
      }
      & img{
        max-width: 100%;
        margin: 0 auto;
      }
    }
   
  }
.mui-progressbar {
    width: rem(140) !important; 
    height: rem(22) !important;
    line-height: rem(20) !important;
    background-color: #fff !important;
    border: 1px solid #e36cba;
    border-radius:8px !important;
    text-align: center;
    color: #e36cba;
    font-size: rem(14);
    & span{
        background-color: rgba(227,108,186,.2) !important;
        transition: 800ms !important;
    }
}